<!-- 自定义导航栏 -->
<template>
    <div class="custom-top-nav" :style="boxStyle">
        <template v-if="navType === '1'">
            <div class="nav-content type-one" :style="titleBarStyle">
                <div class="nav-content-left">
                    <img v-if="iconSrc" class="icon-image" :src="iconSrc" />
                    <el-icon v-else><icon-arrow-left style="font-size: 11px;" /></el-icon>
                </div>
                <div class="nav-content-title">
                    <span>{{ element.eles.customFeature.title }}</span>
                </div>
            </div>
        </template>
        <template v-else-if="navType === '2'">
            <div class="nav-content type-two" :style="titleBarStyle">
                <div class="nav-content-left">
                    <img v-if="iconSrc" class="icon-image" :src="iconSrc" />
                    <el-icon v-else><icon-arrow-left style="font-size: 11px;" /></el-icon>
                </div>
                <div class="nav-content-title">
                    <div class="search-wrap" :style="titleBarSearchStyle">
                        <el-icon><icon-search style="font-size: 11px;" /></el-icon>
                        <span :style="titleBarSearchPlaceholderStyle">{{ inputPlaceholder }}</span>
                    </div>
                </div>
            </div>
        </template>
        <template v-else-if="navType === '3'">
            <div class="nav-content type-three" :style="titleBarStyle">
                <div class="nav-content-left">
                    <div class="icon-wrap">
                        <el-icon><icon-arrow-left style="font-size: 11px;" /></el-icon>
                    </div>
                    <div class="split-line"></div>
                    <div class="icon-wrap">
                        <img v-if="iconSrc" class="icon-image" :src="iconSrc" />
                    </div>
                </div>
                <div class="nav-content-title">
                    <span>{{ element.eles.customFeature.title }}</span>
                </div>
            </div>
        </template>
        <template v-else-if="navType === '4'">
            <div class="nav-content type-four" :style="titleBarStyle">
                <div class="nav-content-left">
                    <div class="icon-wrap">
                        <el-icon><icon-arrow-left style="font-size: 11px;" /></el-icon>
                    </div>
                    <div class="split-line"></div>
                    <div class="icon-wrap">
                        <img v-if="iconSrc" class="icon-image" :src="iconSrc" />
                    </div>
                </div>
                <div class="nav-content-title">
                    <div class="search-wrap" :style="titleBarSearchStyle">
                        <el-icon><icon-search style="font-size: 11px;" /></el-icon>
                        <span :style="titleBarSearchPlaceholderStyle">{{ inputPlaceholder }}</span>
                    </div>
                </div>
            </div>
        </template>
        <template v-else-if="navType === '5'">
            <div class="nav-content type-five" :style="titleBarStyle">
                <div class="nav-content-left">
                    <img v-if="iconSrc" class="icon-image" :src="iconSrc" />
                    <el-icon v-else><icon-arrow-left style="font-size: 11px;" /></el-icon>
                </div>
                <div class="nav-content-title">
                    <div
                        v-for="(element, index) in navContent"
                        :style="{
                            color: element.style.color,
                            opacity: element.style.opacity,
                            backgroundColor: element.style['background-color']
                        }"
                    >
                        {{ element.name }}
                    </div>
                </div>
            </div>
        </template>
    </div>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
// import { useEditStore } from '@/store'
export default defineComponent({
    name: 'WidgetCustomTopNav',
    props: {
        element: {
            type: Object,
            default: () => ({})
        },
        // 自定义style
        customStyle: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props, { emit }) {
        const { element, customStyle } = toRefs(props)

        // const editStore = useEditStore()
        
        const navType = computed(() => element.value.eles?.customFeature?.type || '1')
        const iconSrc = computed(() => element.value.eles?.customFeature?.iconSrc || '')
        // const navTitle = computed(() => element.value.eles?.customFeature?.title || '')
        // const navTitle = computed(() => editStore.pageData.customFeature.name)
        const inputPlaceholder = computed(() => element.value.eles?.customFeature?.style?.['input_placeholder'] || '')
        const navContent = computed(() => element.value.eles?.content || [])

        const boxStyle = computed(() => {
            return {
                ...customStyle.value
            }
        })
        const titleBarStyle = computed(() => {
            const style = element.value.eles.customFeature.style || {}
            return {
                color: style.color,
                opacity: style.opacity,
                backgroundColor: style['background-color']
            }
        })
        const titleBarSearchStyle = computed(() => {
            const style = element.value.eles.customFeature.style.inputStyle || {}
            return {
                // width: style.width,
                // height: style.height,
                // lineHeight: style.height,
                // marginLeft: style['margin-left'],
                opacity: style.opacity,
                backgroundColor: style['background-color']
            }
        })
        const titleBarSearchPlaceholderStyle = computed(() => {
            const style = element.value.eles.customFeature.style.inputStyle || {}
            return {
                color: style.color
            }
        })
        
        return {
            navType,
            iconSrc,
            // navTitle,
            inputPlaceholder,
            navContent,

            boxStyle,
            titleBarStyle,
            titleBarSearchStyle,
            titleBarSearchPlaceholderStyle
        }
    }
})
</script>

<style lang="less" scoped>
@import './widget-custom-top-nav.less';
</style>